<template>
    <div class="role-box">
        <el-table border stripe :data="tableData">
            <el-table-column
                prop="roleId"
                label="No."
                :min-width="180"
            ></el-table-column>
            <el-table-column
                prop="roleName"
                label="角色名称"
                :min-width="180"
            ></el-table-column>
            <el-table-column label="操作" :min-width="180">
                <template #default="{ row }">
                    <el-button
                        size="small"
                        type="primary"
                        @click="handleEditRole(row)"
                        >修改</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup lang="ts">
import { IRoleWithAuth } from '@/api/role/types';
import { roleList } from '@/api/role/index';
defineOptions({
    name: 'Role',
});
const router = useRouter();
const tableData = ref<IRoleWithAuth[]>([]);
const handleEditRole = (row: IRoleWithAuth) => {
    router.push({
        path: '/auth',
        query: { id: row.roleId, auth: row.auths },
    });
};
const listRole = () => {
    roleList().then((res) => {
        tableData.value = res.data;
    });
};
listRole();
</script>
<style scoped lang="less">
.search-form {
    padding: 10px 0 0 10px;
}
.w192 {
    width: 192px;
}
</style>
